<template>
  <div ref="canvasContainer" class="bpmn-container"></div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import BpmnModeler from "bpmn-js/lib/Modeler";
import { propertiesPanelModule } from "bpmn-js-properties-panel";
import camundaModdleDescriptor from "camunda-bpmn-moddle/resources/camunda";

const canvasContainer = ref(null);
let modeler = null;

onMounted(() => {
  const customModules = {
    propertiesPanel: {
      parent: ["toolbar"],
    },
    propertiesProvider: {
      get: function (element) {
        return []; // 这里可以自定义属性面板内容
      },
    },
  };
  const options = {
    container: canvasContainer.value,
    propertiesPanel: { parent: "#js-properties-panel" },
    additionalModules: [propertiesPanelModule],
    moddleExtensions: {
      camunda: camundaModdleDescriptor,
    },
  };
  modeler = new BpmnModeler(options);
  loadDiagram();
});

function loadDiagram() {
  fetch("path/to/your/bpmn/file.bpmn") // 使用实际路径或XML字符串加载BPMN文件
    .then((response) => response.text())
    .then((text) => {
      modeler.importXML(text, (err) => {
        if (err) {
          console.error("Error rendering", err);
        } else {
          console.log("Successfully rendered");
        }
      });
    });
}
</script>

<style>
.bpmn-container {
  width: 100%;
  height: 600px; /* 根据需要调整大小 */
}
</style>
